import React, { useReducer, ReactNode, useState } from "react"
import { FaArrowRight } from "react-icons/fa";
import reducer from "./reducer";

export default function BookablesList () {
  const groups = ["room", "books", "test"]
  
  // const [group, setGroup] = useState("Kit");
  // const [bookableIndex, setBookableIndex] = useState(1);
  // const [hasDetails, setHasDetails] = useState(false);

  const initialState = {
    group: "Rooms",
    bookableIndex: 0,
    hasDetails: true,
    bookables: [{ title: 'xxxx', id: 1 }, { title: 'xxxx33', id: 3 }, { title: 'xxxx2', id: 2 }]
  };

  const [state, dispatch] = useReducer(reducer, initialState);
  const {group, bookableIndex, bookables, hasDetails} = state;

  const bookablesInGroup = group === "room" ?
    [{ title: 'xxxx', id: 1 }, { title: 'xxxx33', id: 3 }, { title: 'xxxx2', id: 2 }]
    :
    [{ title: 'aaaa', id: 1 }, { title: 'aaaa33', id: 3 }, { title: 'aaa333', id: 2 }];

  function changeGroup(e: React.ChangeEvent<HTMLSelectElement>) {
    dispatch({
      type: "SET_GROUP",
      payload: e.target.value
    });
  }

  function changeBookable(selectedIndex: number) {
    dispatch({
      type: "SET_BOOKABLE",
      payload: selectedIndex
    });
  }

  function nextBookable () {
    dispatch({ type: "NEXT_BOOKABLE" });
  }
  function toggleDetails () {
    dispatch({ type: "TOGGLE_HAS_DETAILS" });
  }

  return (
    <>
      <select
        value={group}
        onChange={(e) => changeGroup(e)}>
        {groups.map(g => <option value={g} key={g}>{g}</option>)}
      </select>
      <ul className="bookables items-list-nav">
        {bookablesInGroup.map((b: { title: string; id: number}, i: number) => (
          <li
            key={b.id}
            className={i === bookableIndex ? "rounded-3xl border-4 text-red-500" : undefined}
          >
            <button
              className="btn mr-4 font-bold"
              onClick={() => changeBookable(i)}
            >
              <FaArrowRight />{b.title}
            </button>
            <button
              className="btn"
              onClick={() => toggleDetails()}
            >
              Show Detail
            </button>
            
          </li>
        ))}
      </ul>
      {hasDetails && (<div>Details....</div>)}
    </>
  );
}